<template>
  <div class="buy-part">
    <div>
      <label>{{$t('route.Maintenance_Management')}}</label>
      <div></div>
      <button><img /><label>{{$t('route.Parts_procurement')}}</label></button>
    </div>
    <div>
      <div>
        <label class="title">{{$t('route.Head_Model')}}:</label>
        <label class="content">{{capitalDevice.noseCode}}</label>
        <label class="title mrg-l
				eft-50">{{$t('route.kind')}}:</label>
        <label class="content">{{capitalDevice.kind}}</label>
      </div>

      <el-table :data="tableData" class="table">
        <el-table-column :label="$t('route.Part_No')">
          <template #default="scope">
            <el-input v-model="scope.row.code" class="input" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('route.Part_name')">
          <template #default="scope">
            <el-input v-model="scope.row.name" class="input" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('route.Number_of_parts')">
          <template #default="scope">
            <el-input-number v-model="scope.row.num" :min="1" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('route.Unit_price_of_parts_yuan')">
          <template #default="scope">
            <el-input-number v-model="scope.row.price" :precision="2" class="input" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('route.Replace_or_not')">
          <template #default="scope">
            <el-radio-group v-model="scope.row.rpc">
              <el-radio :label="true">{{$t('route.yes')}}</el-radio>
              <el-radio :label="false">{{$t('route.no')}}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column :label="$t('route.applicant')">
          <template #default="scope">
            <el-input v-model="scope.row.nickname" class="input" />
          </template>
        </el-table-column>

        <el-table-column fixed="right" :label="$t('route.operate')" width="120">
          <template #default="scope">
            <el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)">
              {{$t('route.Delete')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-button style="width: 100%" @click="addItemClick">{{$t('route.new_column')}}</el-button>

      <el-button class="btn-save" @click='saveClick'>{{$t('route.preservation')}}</el-button>
    </div>


  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";

export default {
  data() {
    return {
      capitalDevice: {},
      batch: 0,
      tableData: [{
        name: null,
        num: 1,
        price: 0,
        rpc: true,
        nickname: null
      }],
    };
  },
  methods: {
    addItemClick() {
      this.tableData.push({
        code: null,
        name: null,
        num: 1,
        price: 0,
        rpc: true,
        nickname: null
      });
    },
    saveClick() {
      for (var item of this.tableData) {
        if (CommonUtils.isEmpty(item.code)) {
          this.$message.error(this.$t('route.The_part_number_cannot_be_empty'));
          return;
        }
        if (CommonUtils.isEmpty(item.name)) {
          this.$message.error(this.$t('route.Part_name_cannot_be_empty'));
          return;
        }
        if (CommonUtils.isEmpty(item.nickname)) {
          this.$message.error(this.$t('route.Applicant_cannot_be_empty'));
          return;
        }
      }
      http.post(api.ADD_PART, {
        repairId: this.capitalDevice.repairId,
        partList: JSON.stringify(this.tableData),
      }, data => {
        this.$message.success(this.$t('route.Saved_successfully'));
        this.$router.go(-1);
      });

    },
    getPartList() {
      http.post(api.GET_PART_LIST, {
        batch: this.capitalDevice.partBatch,
      }, data => {
        this.tableData = data.data;
      });
    },

    deleteRow(index) {
      this.tableData.splice(index, 1)
    }

  },
  created() {
    this.capitalDevice = JSON.parse(CommonUtils.getParam(this, 'capitalDevice', 'setCapitalDevice'));
    this.getPartList();
  }

};
</script>
<style lang="scss" scoped>
.buy-part {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  >div {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
  }

  >div:nth-of-type(1) {

    >label:nth-of-type(1) {
      font-weight: 600;
    }

    >div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    >button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      >img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }

    }
  }

  >div:nth-of-type(2) {
    flex-direction: column;
    align-items: flex-start;

    >div:nth-of-type(1) {
      color: #555555;
      font-weight: 800;

      .content {
        margin-left: 20px;
        width: 250px;
      }
    }

    .table {
      margin-top: 50px;
      width: 100%;

      .input {
        width: 60%;
      }
    }

    .btn-save {
      margin-top: 50px;
      width: 200px;
      margin-left: 0px;
    }




  }

}
</style>
